<template>
  <div>
    <nav-top title="提现" show="true">
    </nav-top>
      <div class="proposeMain">
        <div class="mainList">
          <div class="mainListTop">
            可提现:<span class="nowMoney">{{money}}</span>
          </div>
          <ul>
            <li class="clearfix">
              <span class="fl">提现类型</span>
              <b class="fr modeType">微信转账</b>
            </li>
            <li class="clearfix">
              <span class="fl">提现金额</span>
              <input type="number" class="fr amount" v-model="num" placeholder="请输入100以上的整数" @input="onlyNum">
            </li>
            <li class="clearfix">
              <span class="fl">微信昵称</span>
              <b class="fr wxNickName">{{wxNickName}}</b>
            </li>
          </ul>
          <div class="btn">
            <button @click="btnClick">
              提现
            </button>
          </div>
        </div>
      </div>
      <div class="proposeTips">
        注: 请妥善操作，可在个人信息-收款信息中修改内容
        提现每日提现时间15:00至19:00。
      </div>
    </div>
</template>

<script>
  import navTop from '../components/navTop.vue'
  import reqData from '../ajax/ajax.js'
  export default {
    name: '',
    data () {
      return {
        money: 0,
        wxNickName: '',
        num: ''
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        let self = this
        reqData(this.Url + '/room/withdraw/page', 'get', {}, function (data) {
          if (data.status === 0) {
            self.money = data.data.totalIncome
            self.wxNickName = data.data.nickName
          }
        })
      })
    },
    components: {
      navTop
    },
    methods: {
      btnClick () {
        if (!this.num) {
          this.$message({
            showClose: true,
            message: '金额不能为空',
            type: 'error'
          })
          return false
        }
        if (this.num < 100) {
          this.$message({
            showClose: true,
            message: '请输入大于100的整数',
            type: 'error'
          })
          return false
        }
        if (Number(this.num) > Number(this.money)) {
          this.$message({
            showClose: true,
            message: '您的余额不足',
            type: 'error'
          })
          return false
        }
        reqData(this.Url + '/room/withdraw/launch', 'post', {}, function (data) {
          if (data.status === 0) {
            self.money = data.data.totalIncome
          }
          self.$message({
            showClose: true,
            message: data.message,
            type: 'error'
          })
        })
      },
      onlyNum () {
        console.log(this.num)
        if (this.num === '') {
          this.num = '0'
        }
        let reg = /[^0-9]/g
        let content = this.num.replace(reg, '')
        this.num = content.slice(0, 4)
      }
    }
  }
</script>
<style lang="less" scoped>
  .proposeMain {
    background-color: #fff;
    padding-top: 0.3rem;
  }
  .proposeMain .mainList {
    border-bottom: 0.02rem solid #e8e8e8;
    border-top: 0.02rem solid #e8e8e8;
  }
  .proposeMain .mainList .mainListTop {
    height: 1.36rem;
    line-height: 1.36rem;
    color: #FFA385;
    font-size: 0.4rem;
    text-align: center;
    border-bottom: 0.02rem solid #e8e8e8;
  }
  .proposeMain .mainList ul {
    padding: 0 0.22rem;
  }
  .proposeMain .mainList ul li {
    line-height: 0.6rem;
    padding: 0.11rem 0 0.17rem 0;
    border-bottom: 0.02rem solid #e8e8e8;
  }
  .proposeMain .mainList ul li span {
    font-weight: bold;
  }
  .proposeMain .mainList ul li b {
    color: #9B9B9B;
  }
  .proposeMain .mainList ul li input {
    width: 4.2rem;
    height: 0.6rem;
    padding-right: 0.1rem;
    border: none;
    background-color: #F2F2F4;
    box-shadow: inset 0 0px 0.03rem 0.03rem #E8E8E8;
    font-size: 0.3rem;
    outline: none;
    color: #000;
    text-align: center;
  }
  .proposeMain .mainList ul li input:-ms-input-placeholder {
    text-align: center;
  }
  .proposeMain .mainList ul li input::-webkit-input-placeholder {
    text-align: center;
  }
  .proposeMain .mainList ul li input::-moz-placeholder {
    text-align: center;
  }
  .proposeMain .mainList .btn {
    padding: 0.3rem 0 0.33rem 0;
    text-align: center;
  }
  .proposeMain .mainList .btn button {
    height: 0.61rem;
    width: 4.02rem;
    color: #fff;
    -webkit-border-radius: 0.08rem;
    -moz-border-radius: 0.08rem;
    border-radius: 0.08rem;
    outline: none;
    border: none;
    background-color: #00B01E ;
  }
  .proposeTips {
    margin: 0.17rem auto 0;
    width: 5.57rem;
    line-height: 0.33rem;
    font-size: 0.24rem;
    color: #417505;
  }
</style>
